<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../案例二/img/bg.png");
        }
        .cl1{
            width: 400px;
            border:darkslategrey solid 1px;
            margin: auto;
            text-align: center;
            background: beige;
        }
        .cl2{
            text-align: center;
        }
        span{
            font-size: 30px;
            color: red;
        }
        .cl3{
            text-align: left;
            margin-left: 95px;
        }

    </style>
</head>
<body>
    <div>
        <span>
            黑马头条
        </span>
    </div>
    <div class="cl1">
        <div style="color: deeppink" class="cl2">
            注册详情
        </div>
        <hr/>
        <form>
            <div>
                <label for="username">
                    姓名:
                </label>
                <input type="text" name="username" id="username" placeholder="请输入姓名"><br/>
                <label for="password">
                    密码:
                </label>
                <input type="password" name="password" id="password" placeholder="请输入密码"><br/>
                <label for="email">
                    邮箱:
                </label>
                <input type="email" name="email" id="email" placeholder="请输入邮箱"><br/>
                <label for="tel">
                    手机:
                </label>
                <input type="tel" name="tel" id="tel" placeholder="请输入手机"><br/>
            </div>
            <hr/>
            <div class="cl3">
                <label for="gender">
                    性别:
                </label>
                <input type="radio" name="gender" id="gender" value="man">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="woman">女<br/>
                <label for="like">
                    爱好:
                </label>
                <input type="checkbox" name="like" id="like" value="music">音乐
                <input type="checkbox" name="like" value="game">游戏
                <input type="checkbox" name="like" value="movie">电影<br/>
                <label for="birthdate">
                    出生日期:
                </label>
                <input type="date" name="birthdate" id="birthdate"><br/>
                <label for="city">
                    所在城市:
                </label>
                <select name="city" id="city">
                    <option disabled selected hidden>请选择您所在的城市</option>
                    <optgroup label="直辖市">
                        <option>
                            上海
                        </option>
                        <option>
                            北京
                        </option>
                        <option>
                            重庆
                        </option>
                        <option>
                            深圳
                        </option>
                    </optgroup>
                    <optgroup label="省会城市">
                        <option>
                            西安
                        </option>
                        <option>
                            南京
                        </option>
                        <option>
                            太原
                        </option>
                        <option>
                            武汉
                        </option>
                    </optgroup>
                </select>
            </div>
            <hr/>
            <div>
                <label for="text">
                    个性签名:
                </label>
                <textarea rows="6" cols="40" id="text" placeholder="请输入您的与众不同:"></textarea>
            </div>
            <hr/>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </form>
    </div>
</body>
</html>